import React ,{useEffect,useRef,useCallback} from 'react';
import {lazyImg} from "../../assets/js/utils";
import Swiper from 'swiper/bundle';

import Css from '../../assets/css/growingup/index.css'
function hoc(WidthComponent) {
    function HocComponent(props) {
        let useProSwiper=useRef(null);
        let times= useRef(null)
        //产品切换
        const ProSwiperTab = useCallback(()=>{
            useProSwiper.current = new Swiper('#gallery',{
                effect : 'fade',
                fadeEffect: {
                    crossFade: true,
                },
                autoplay: {
                    delay: 5000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
                loop : true,
                spaceBetween: 10,
                lazy: {
                    preloaderClass: 'Loading',
                    loadPrevNext: true,
                    loadPrevNextAmount: 2,
                },
                slideActiveClass : Css['myActive'],
                thumbs: {
                    swiper: {
                        el: '#thumbs',
                        spaceBetween: 10,
                        slidesPerView: 4,
                        watchSlidesVisibility: true,
                        allowSlideNext : false,
                        allowSlidePrev : false,
                    },
                    slideThumbActiveClass: Css['myActive'],
                }
            })
        },[])

        //懒加载
        function echo(){
            lazyImg()
        }
        //点击跳转页面
        function goPages(url){
            let strUrl = "^(://)" +
                "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" +//ftp的user@+
                "(([0-9]{1,3}.){3}[0-9]{1,3}" +// IP形式的URL- 199.194.52.184 +
                "|" +// 允许IP和DOMAIN（域名） +
                "([0-9a-z_!~*'()-]+.)*" +// 域名- www. +
                "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]." +// 二级域名 +
                "[a-z]{0,6})" +// first level domain- .com or .museum +
                "(:[0-9]{1,4})?" +// 端口- :80 +
                "((/?)|"  +// a slash isn't required if there is no file name +
                "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
            let reg = new RegExp(strUrl);
            if (!reg.test(url)){
                window.open(url)
            }else {
                props.history.push(window.base.config.path+url)
            }
        }
        useEffect(()=>{
            echo();
            times.current= setTimeout(()=>{
                ProSwiperTab();
            },800)

            return ()=>{
                //页面离开时执行
                clearInterval(times.current,useProSwiper.current)
            }
        },[ProSwiperTab])
        let newProps={
            goPages:goPages
        }
        return(
            <WidthComponent {...props} {...newProps}></WidthComponent>
        )
    }
    return HocComponent
}
export default hoc